<template>
  <div class="science-prevention">
    <div class="title"></div>
    <div class="main"></div>

    <div class="science-summary">
      <div>监管单位 1601 家</div>
      <n-date-picker v-model:formatted-value="timestamp" value-format="yyyy-MM-dd" type="date" class="!w-[182px] ml-[8px]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';

const timestamp = ref('2024-07-02')

defineComponent({ name: 'SciencePrevention' });
</script>

<style scoped lang="scss">
.science-prevention {
  @apply w-full h-auto flex flex-col justify-between;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[168px];
    background: url('./assets/data-bg.png') no-repeat center;
  }

  .science-summary {
    @apply absolute top-[6px] right-0 flex items-center text-[16px] text-[#DAAD17];
    font-family: Alibaba PuHuiTi;
  }
}
</style>
